<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>学生信息表格示例</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css" rel="stylesheet">
</head>
<body>

<div class="container mt-4">
    <h2>学生信息表格</h2>
    <table class="table table-bordered table-background">
        <thead>
            <tr>
                <th>编号</th>
                <th>姓名</th>
                <th>学号</th>
                <th>年龄</th>
                <th>职业</th>
                <th>操作</th>
            </tr>
        </thead>
        <tbody id="studentTable">
            <tr>
                <td>1</td>
                <td>李明</td>
                <td>2023001</td>
                <td>19</td>
                <td>学生</td>
                <td>
                    
                    <button class="btn btn-danger delete-btn">删除 <i class="fas fa-trash"></i></button>
                </td>
            </tr>
            <tr>
                <td>2</td>
                <td>张华</td>
                <td>2023002</td>
                <td>20</td>
                <td>学生</td>
                <td>
                    
                    <button class="btn btn-danger delete-btn">删除 <i class="fas fa-trash"></i></button>
                   
                </td>
            </tr>
            <tr>
                <td>3</td>
                <td>王伟</td>
                <td>2023003</td>
                <td>21</td>
                <td>学生</td>
                <td>
                    
                    <button class="btn btn-danger delete-btn">删除 <i class="fas fa-trash"></i></button>
                    
                </td>
            </tr>
            <tr>
                <td>4</td>
                <td>赵静</td>
                <td>2023004</td>
                <td>22</td>
                <td>学生</td>
                <td>
                    
                    <button class="btn btn-danger delete-btn">删除 <i class="fas fa-trash"></i></button>
                    
                </td>
            </tr>
            <tr>
                <td>5</td>
                <td>周丽</td>
                <td>2023005</td>
                <td>22</td>
                <td>学生</td>
                <td>
                    
                    <button class="btn btn-danger delete-btn">删除 <i class="fas fa-trash"></i></button>
                    
                </td>
            </tr>
            <!-- 更多行 -->
        </tbody>
    </table>
    <button class="btn btn-success" id="addStudentBtn">添加 <i class="fas fa-plus"></i></button>
</div>

<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.2/dist/umd/popper.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.min.js"></script>
<script>
    document.addEventListener('DOMContentLoaded', function() {
        const table = document.getElementById('studentTable');
        const addStudentBtn = document.getElementById('addStudentBtn');
        
        table.addEventListener('click', function(event) {
            const target = event.target;
            const row = target.closest('tr');

            if (target.classList.contains('delete-btn')) {
                row.remove();
            }

            if (target.classList.contains('edit-btn')) {
                const cells = row.querySelectorAll('td:not(:last-child)');
                cells.forEach((cell, index) => {
                    const value = cell.textContent;
                    cell.innerHTML = `<input class="form-control" type="text" value="${value}">`;
                });
                target.textContent = '保存';
                target.classList.remove('edit-btn');
                target.classList.add('save-btn');
            }

            if (target.classList.contains('save-btn')) {
                const inputs = row.querySelectorAll('input');
                inputs.forEach((input, index) => {
                    const value = input.value;
                    input.parentElement.textContent = value;
                });
                target.textContent = '编辑';
                target.classList.remove('save-btn');
                target.classList.add('edit-btn');
            }
        });

        addStudentBtn.addEventListener('click', function() {
            const newRow = document.createElement('tr');
            newRow.innerHTML = `
                <td><input class="form-control" type="text" placeholder="编号"></td>
                <td><input class="form-control" type="text" placeholder="姓名"></td>
                <td><input class="form-control" type="text" placeholder="学号"></td>
                <td><input class="form-control" type="text" placeholder="年龄"></td>
                <td><input class="form-control" type="text" placeholder="职业"></td>
                <td>
                    <button class="btn btn-primary save-btn">保存 <i class="fas fa-save"></i></button>
                    <button class="btn btn-danger delete-btn">删除 <i class="fas fa-trash"></i></button>
                </td>
            `;
            table.appendChild(newRow);
        });
    });
</script>
</body>
</html>
